<template>
  <div class="warning-block">
    <svg class="warning-spiral" viewBox="0 0 100 100">
      <path v-for="(i, index) in 5" :key="index" :d="generateSpiralPath(i)" fill="none" stroke="black" stroke-width="1" />
    </svg>
    <span class="warning-text">施工中</span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    generateSpiralPath(num) {
      let path = 'M ';
      const centerX = 50;
      const centerY = 50;
      const numPoints = 300; // 增加点数让螺旋更平滑
      const maxRadius = Math.sqrt(2) * 50; // 确保半径能到达容器边角
      const rotation = 8; // 增加旋转圈数

      for (let i = 0; i < numPoints; i++) {
        const t = i / numPoints;
        const radius = t * maxRadius;
        const angle = 2 * Math.PI * rotation * t + (num * 2 * Math.PI / 5);
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);
        if (i === 0) {
          path += `${x},${y}`;
        } else {
          path += ` L ${x},${y}`;
        }
      }
      return path;
    }
  }
};
</script>

<style scoped>
.warning-block {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #F56C6C;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.warning-spiral {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: rotateSpiral 8s linear infinite;
}

@keyframes rotateSpiral {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.warning-text {
  color: #E6A23C;
  font-size: 24px;
  font-weight: bold;
  z-index: 1;
  animation: blinkText 4s ease-in-out infinite alternate;
}

@keyframes blinkText {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
</style>
